<template>
	<view>
		<view>
			<view class="flex LocationSetting" :class="showInput !=1 ? 'mt-10' : 'mt-140'">
				<u--image shape="circle" :showLoading="true" :src="srcImg" width="120px" height="120px"></u--image>
			</view>

			<!-- 登陆 -->
			<view v-if="showInput === 1">
				<view class="px-20 mt-2">
					<u--form labelPosition="left" :model="userInfo" :rules="rules" ref="uForm">
						<u-form-item labelWidth="60" label="手机号:" prop="phone" borderBottom ref="itemPhone">
							<u--input maxlength="11" v-model="userInfo.phone" type="number" border="none"></u--input>
						</u-form-item>
						<u-form-item labelWidth="60" label="密 码:" prop="password" borderBottom ref="itemPassword">
							<u--input v-model="userInfo.password" type="password" border="none"></u--input>
						</u-form-item>
					</u--form>
				</view>
				<view class="px-20 mt-10">
					<u-button type="primary" text="登陆" @click="validateForm"></u-button>
					<view class="pt-10 po-r">
						<view class="po-a Setting">
							<view class="flex">
								<view><text class="my-link" @click="showInput = 0">注册</text></view>
								<view class="pl-10"><text class="my-link" @click="showInput = 2">找回密码</text></view>
							</view>
						</view>
					</view>
				</view>
			</view>

			<!-- 注册 -->
			<view v-if="showInput === 0">
				<view class="px-10 mt-2">
					<u--form labelPosition="left" :model="userInfo" :rules="rules" ref="uForm">
						<u-form-item labelWidth="60" label="手机号:" prop="phone" borderBottom ref="itemPhone">
							<u--input maxlength="11" v-model="userInfo.phone" type="number" border="none"></u--input>
						</u-form-item>
						<u-form-item labelWidth="60" label="密 码:" prop="password" borderBottom ref="itemPassword">
							<u--input v-model="userInfo.password" type="password" border="none"></u--input>
						</u-form-item>
						<u-form-item labelWidth="60" label="姓名" prop="name" borderBottom ref="itemPhone">
							<u--input maxlength="11" v-model="userInfo.name" type="number" border="none"></u--input>
						</u-form-item>
						<u-form-item labelWidth="60" label="身份证号" prop="iDNumber" borderBottom ref="itemPhone">
							<u--input maxlength="18" v-model="userInfo.iDNumber" type="number" border="none"></u--input>
						</u-form-item>
						<!-- 手机验证码方式 -->
						<u-form-item prop="code" ref="itemPassword" v-if="false">
							<view class="pt-5">
								<view class="flex">
									<view class="pt-5">
										<text>验证码:</text>
									</view>
									<view class="pl-5">
										<u-code-input v-model="userInfo.code" :space="7" mode="line"
											:maxlength="4"></u-code-input>
									</view>
									<view class="pl-5 pt-2 utoast">
										<view class="wrap">
											<u-toast ref="uToast"></u-toast>
											<u-code :seconds="seconds" @end="end" @start="start" ref="uCode"
												@change="codeChange"></u-code>
											<u-button @tap="getCode" size="small">{{tips}}</u-button>
										</view>
									</view>
								</view>
							</view>
						</u-form-item>
						
							<view class="px-10">
								<view class="flex j_sb pt-20 wid-20">
									<view class="wid-8"><u-button type="primary" text="注册"
											@click="validateForm"></u-button></view>

									<view class="wid-8"><u-button text="取消" @click="showInput=1"></u-button></view>
								</view>
							</view>
					</u--form>
				</view>
			</view>

			<!-- 找回密码 -->
			<view v-if="showInput === 2">
				<view class="px-10 mt-2">
					<u--form labelPosition="left" :model="userInfo" :rules="rules" ref="uForm">
						<u-form-item labelWidth="60" label="手机号:" prop="phone" borderBottom ref="itemPhone">
							<u--input maxlength="11" v-model="userInfo.phone" type="number" border="none"></u--input>
						</u-form-item>
						<u-form-item labelWidth="60" label="新密码:" prop="password" borderBottom ref="itemPassword">
							<u--input v-model="userInfo.password" type="password" border="none"></u--input>
						</u-form-item>
						<u-form-item labelWidth="60" label="姓 名:" prop="name" borderBottom ref="itemPhone">
							<u--input maxlength="11" v-model="userInfo.name" type="number" border="none"></u--input>
						</u-form-item>
						<u-form-item labelWidth="60" label="身份证号:" prop="iDNumber" borderBottom ref="itemPhone">
							<u--input maxlength="18" v-model="userInfo.iDNumber" type="number" border="none"></u--input>
						</u-form-item>
						<!-- 验证码方式 -->
						<u-form-item prop="code" ref="itemPassword" v-if="false">
							<view class="pt-5">
								<view class="flex">
									<view class="pt-5">
										<text>验证码:</text>
									</view>
									<view class="pl-5">
										<u-code-input v-model="userInfo.code" :space="7" mode="line"
											:maxlength="4"></u-code-input>
									</view>
									<view class="pl-5 pt-2 utoast">
										<view class="wrap">
											<u-toast ref="uToast"></u-toast>
											<u-code :seconds="seconds" @end="end" @start="start" ref="uCode"
												@change="codeChange"></u-code>
											<u-button @tap="getCode" size="small">{{tips}}</u-button>
										</view>
									</view>
								</view>
							</view>
						</u-form-item>
							<view class="px-10">
								<view class="flex j_sb pt-20">
									<view class="wid-8"><u-button type="primary" text="修改"
											@click="validateForm"></u-button></view>

									<view class="wid-8"><u-button text="取消" @click="showInput = 1"></u-button></view>
								</view>
							</view>
					</u--form>
				</view>
			</view>

		</view>
		<view class="po-a weizhi ta-c">
			<text>威海易得科技有限有限公司技术支持</text>
		</view>
	</view>
</template>


<script>
	import {
		msg,
		to,set
	} from "@/static/js/uilt/index.js";
	import {
		regist,
		postUser,
		repassword
	} from "@/static/js/api/login.js"
	export default {
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		},
		data() {
			return {
				tips: '',
				seconds: 30,
				showInput: 1,
				rules: {
					phone: {
						type: 'string',
						required: true,
						message: '请输入手机号',
						trigger: ['blur', 'change'],
						min: 11,
						max: 11
					},
					password: {
						type: 'string',
						required: true,

						trigger: ['blur', 'change'],
						min: 6, // 最小长度
						max: 20, // 最大长度
						message: '密码长度应为6到20个字符'
					},
					name: {
						type: 'string',
						required: true,
						message: '请填写姓名',
						trigger: ['blur', 'change']
					},
					iDNumber: {
						type: 'string',
						required: true,
						message: '请填写身份证号',
						trigger: ['blur', 'change']
					},
				},
				srcImg: require('@/static/imge/logo.png'),
				
				userInfo: {
					phone: '',
					password: '',
					code: "",
					name: "",
					iDNumber: "",
					captcha: "44444",

				}
			}
		},
		watch: {
			showInput: {
				handler() {
					this.userInfo = {
						phone: '',
						password: '',
						code: ''
					};
				}
			}
		},
		methods: {
			//验证 
			async validateForm() {
				const isValid = await this.$refs.uForm.validate();
				if (!isValid) return
				// if (this.showInput != 1 && !this.userInfo.code) return msg('验证码不能为空')
				this.submit(this.showInput)
			},
			async submit(e) {
				let [name, res, userInfo] = ["", "", this.userInfo]

				switch (e) {
					case 0:
						res = await regist(userInfo)
						name = "注册成功"
						break;
					case 1:
						res = await postUser(userInfo)
						if(res.code !=="1")return 
						res = res.data
						set('userInfo',res)
						name = '登陆成功'
						return setTimeout(() => {
							uni.switchTab({
								url: '/pages/hemo/hemo'
							});
						}, 500)
						break;
					case 2:
						name = '修改成功'
						res = await repassword(userInfo)
						// this.showInput = 1
						break;
				}
				setTimeout(() => {
					this.showInput = 1
				}, 500)
				msg(name)
			},

			// 验证码
			codeChange(text) {
				this.tips = text;
			},
			getCode() {
				if (this.$refs.uCode.canGetCode) {
					// 模拟向后端请求验证码
					uni.showLoading({
						title: '正在获取验证码'
					})
					setTimeout(() => {
						uni.hideLoading();
						// 这里此提示会被this.start()方法中的提示覆盖
						uni.$u.toast('验证码已发送');
						// 通知验证码组件内部开始倒计时
						this.$refs.uCode.start();
					}, 2000);
				} else {
					uni.$u.toast('倒计时结束后再发送');
				}
			},
			end() {
				uni.$u.toast('倒计时结束');
			},
			start() {
				uni.$u.toast('倒计时开始');
			}
		}
	}
</script>

<style lang="scss">
	.LocationSetting {
		justify-content: space-around;

	}

	.mt-140 {
		margin-top: 140rpx;
	}

	.Setting {
		right: 0rpx;
	}

	.my-link {
		color: #409eff;
	}

	.utoast {
		.u-button--square {
			width: 180rpx !important;
		}
	}
	.weizhi{
		width: 100%;
		bottom: 200rpx;
		font-size: 30rpx;
		letter-spacing: 8rpx;
		color: #787878;
	}
</style>